<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>

      <el-table-column label="ID" prop="id"></el-table-column>

      <el-table-column label="名字" prop="name"></el-table-column>

      <el-table-column label="年龄" prop="age"></el-table-column>

      <el-table-column label="性别" prop="sex"></el-table-column>

      <el-table-column label="手机号" prop="phone"></el-table-column>

      <el-table-column label="邮箱" prop="email"></el-table-column>

      <el-table-column label="现居住地" prop="address"></el-table-column>

      <!-- <el-table-column label="政治面貌" prop="political"></el-table-column> -->

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="Edit(scope.row)">详情</el-button>
          <el-button size="mini" type="danger" @click="Delete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="page"
    >
    </el-pagination>

    <!--弹出的弹窗内容-->
    <el-dialog title="详情" :visible.sync="dialogVisible" center width="50%">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <el-form :inline="true" label-width="100px">
          <el-form-item label="姓名">
            <el-input
              v-model="form.name"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" label="男">男</el-radio>
            <el-radio v-model="form.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input
              v-model="form.age"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="form.phone"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="form.email"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="政治面貌">
            <el-input
              v-model="form.political"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="现居住地 ">
            <el-input
              v-model="form.address"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="账号">
            <el-input
              v-model="form.account"
              :disabled="true"
              placeholder="暂无内容"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <!-- <p style="color: #f00">提示: 请输入你的个人信息</p> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UInformation",
  data() {
    return {
      tableData: [],
      form: [],
      dialogVisible: false,

      currentPage: 1, // 当前页
      total: 0, // 总页数
      pageSize: 5, // 一页有多少内容
    };
  },
  created() {
    this.page(1);
  },
  methods: {
    page(currentPage) {
      const _this = this;
      this.$axios.get("/studentAll?currentPage=" + currentPage).then((res) => {
        // console.log(res);
        _this.tableData = res.data.data.records;
        _this.currentPage = res.data.data.current;
        _this.total = res.data.data.total;
        _this.pageSize = res.data.data.size;
      });
    },
    Edit(e) {
      const _this = this;
      this.$axios.get("/stuInformation/" + e.id).then((res) => {
        console.log(res);
        _this.form = res.data.data;
      });

      this.dialogVisible = true; //显示弹窗
    },
    Delete(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const _this = this;
          _this.$axios.get("/deleteStudentUser/" + e.id).then((res) => {
            console.log(res);
            window.location.reload();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
</style>
